<template>
  <div class="my">
    <div class="list">
      <ul>
        <li>
          <div class="left">
            <img src="../images/bdyy.png" alt />
          </div>
          <div class="right">
            <span>本地音乐</span>
            <span>(1)</span>
          </div>
        </li>
        <li>
          <div class="left">
            <img src="../images/zjbf.png" alt />
          </div>
          <div class="right">
            <span>最近播放</span>
            <span>(1)</span>
          </div>
        </li>
        <li>
          <div class="left">
            <img src="../images/xzgl.png" alt />
          </div>
          <div class="right">
            <span>下载管理</span>
            <span>(1)</span>
          </div>
        </li>
        <li>
          <div class="left">
            <img src="../images/wddt.png" alt />
          </div>
          <div class="right">
            <span>我的电台</span>
            <span>(1)</span>
          </div>
        </li>
        <li>
          <div class="left">
            <img src="../images/grsc.png" alt />
          </div>
          <div class="right">
            <span>我的收藏</span>
            <span>(1)</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="song_list">
      <div class="header">
        <div class="left" @click="toggle()">
          <i class="downLeft"></i>
          <span class="title">创建的歌单</span>
          <span class="num">(1)</span>
        </div>
        <div class="right">
          <i></i>
          <i></i>
        </div>
      </div>
      <div class="main">
        <div class="left">
          <div class="m_left">
            <img src="../images/bbm.png" alt />
          </div>
          <div class="m_right">
            <p>我喜欢的音乐</p>
            <p>0首</p>
          </div>
        </div>
        <div class="right">
          <button>
            <i></i>
            <span>心动模式</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    toggle() {
      $(".main").slideToggle();
      $(".downLeft").toggleClass("toggle");
    }
  }
};
</script>
<style lang="scss" scoped>
.my {
  padding-bottom: 1rem;
  overflow: hidden;
  .song_list {
    margin-bottom: 0.1rem;
    padding: 0 0.2rem;
    .main {
      overflow: hidden;
      .left {
        float: left;
        .m_left {
          float: left;
          background-color: rgb(97, 96, 96);
          border-radius: 0.08rem;
          margin: 0 0.1rem;
          img {
            width: 1rem;
          }
        }
        .m_right {
          float: left;
          margin-left: 0.1rem;
          p {
            text-align: left;
          }
          p:first-child {
            font-weight: 500;
            font-size: 0.34rem;
            color: #333;
            padding-top: 0.08rem;
          }
          p:last-child {
            font-weight: normal;
            font-size: 0.24rem;
            color: #999;
          }
        }
      }
      .right {
        float: right;
        line-height: 1rem;
        button {
          padding: 0 0.2rem;
          bottom: 0;
          border: 0.01rem solid #ccc;
          font-size: 0.26rem;
          font-weight: 100;
          border-radius: 1rem;
          line-height: 0.5rem;
          background-color: #fff;
          i {
            background: url(../images/xd.png) no-repeat;
            background-size: 100% 100%;
            width: 0.3rem;
            height: 0.3rem;
            display: inline-block;
            vertical-align: middle;
          }
          span {
            vertical-align: middle;
          }
        }
      }
    }
    .header {
      overflow: hidden;
      line-height: 1rem;
      .left {
        float: left;
        i {
          background: url(../images/aya.png) no-repeat;
          background-size: 100% 100%;
          width: 0.3rem;
          height: 0.3rem;
          display: inline-block;
          vertical-align: middle;
          margin-right: 0.1rem;
          transition: 0.5s;
        }
        i.toggle {
          transform: rotate(-90deg);
        }
        span {
          vertical-align: middle;
        }
        span.title {
          font-size: 0.38rem;
          color: #333;
          font-weight: 900;
        }
        span.num {
          font-size: 0.34rem;
          color: #999;
        }
      }
      .right {
        float: right;
        i:first-child {
          background: url(../images/i.png) no-repeat;
          background-size: 100% 100%;
          width: 0.35rem;
          height: 0.35rem;
          display: inline-block;
          margin-right: 0.2rem;
        }
        i:last-child {
          background: url(../images/b0_.png) no-repeat;
          background-size: 100% 100%;
          width: 0.35rem;
          height: 0.35rem;
          display: inline-block;
          margin-right: 0.1rem;
        }
      }
    }
  }
  .list {
    padding-bottom: 0.1rem;
    background-color: #eee;
    ul {
      background-color: #fff;
      border-top: 0.01rem solid #eee;
      li {
        line-height: 1rem;
        overflow: hidden;
        display: flex;
        .left {
          padding: 0.25rem 0.5rem;
          img {
            width: 0.5rem;
          }
        }
        .right {
          flex: 1;
          border-bottom: 0.01rem solid #eee;
          color: #333;
          font-size: 0.34rem;
          text-align: left;
          span:last-child {
            color: #ccc;
            font-size: 0.28rem;
          }
        }
      }
    }
  }
}
</style>